/*t1j8G0D6CkAf09sEmPaBx7v70CHlqO5KF008ZEPx4OQ=*/
import React, { Component } from 'react';
import { base,cardCache } from 'nc-lightapp-front';
let { setDefData, getDefData } = cardCache;
const {NCButton}=base;
import './index.less';
class ExtentionArea extends Component {
    constructor(props){
        super(props);
        this.state={
            tradeName:{},
            isActiveIndex:'-1'
        }
    }
    componentWillReceiveProps(nextProps){
        let {tradeName,isActiveIndex}=this.state;
        if(nextProps.updateTradeType&&nextProps.updateTradeType.code!==tradeName.code){
            this.setState({
                tradeName:nextProps.updateTradeType,
                isActiveIndex:'-1'
            })
        }
    }
    changeActiveIndex=(tradeName,index)=>{
        let {isActiveIndex}=this.state;
        this.setState({
            tradeName:tradeName,
            isActiveIndex:isActiveIndex==index?'-1':index
        })
    }
    render(){
        let {isActiveIndex}=this.state;
        let {buttons,tradeNames,getButtons,buttonClick,pages,dataSource, billType,json,checkedTradetype,updateTradeType}=this.props;
        // tradeNames=[{code: 'D1', name: '应付单'},{code: 'F1', name: '应收单'},{code: 'D1', name: '付款单'}];
        return(
           <div className="arapEmptyList extention-area">
            <div className='extention-tradetype'>
                {buttons && buttons.length > 0 ? <span className='extention-item-title'>{json['public-000292']}</span>: null}{/* 国际化处理： 最近选择交易类型:*/}
                {
                    tradeNames.map((tradeName,index) => {
                        let isActiveClassName=isActiveIndex==index?'tradeType isActiveChecked':'tradeType';
                        if(checkedTradetype&&tradeName.code==checkedTradetype.code){
                            isActiveClassName='tradeType isActiveChecked';
                        }
                        return(
                            <span className={isActiveClassName}
                                onClick={()=>{
                                    buttons = getButtons(pages, dataSource, billType, tradeName.code)
                                    setDefData('extendArea-tradeCode', dataSource, tradeName.code);
                                    setDefData('sessionTradeType', dataSource, tradeName.code);
                                    this.changeActiveIndex(tradeName,index);
                                    updateTradeType&&updateTradeType(tradeName);
                                }}
                            >
                                <a colors="info" bordered='false' fieldid='tradeType'>{tradeName.name}
                                </a>
                                {isActiveIndex==index||(checkedTradetype&&tradeName.code==checkedTradetype.code)?<i class="bipg iconfont icon-item-switch icon-queding"></i>:null}
                            </span>
                        ) 
                    })
                }
            </div>
            <div className='extention-button' style={{ marginTop: '10px',marginLeft:'-8px' }}>
                {
                    buttons && buttons.length > 0 && buttons.map(button => {
                        if (button.makeflag) {
                            return <NCButton colors="info" fieldid='Add' onClick={buttonClick.bind(pages, pages.props, 'Add')} >{json['public-000167']}</NCButton>; /** 国际化处理： 自制 */
                        } else {
                            return <NCButton colors="info" fieldid={button.src_billtype} onClick={buttonClick.bind(pages, pages.props, button.src_billtype)} >{button.src_billtypename}</NCButton>;
                        }
                    })
                }
            </div>
        </div>
        )
    }
}
export default ExtentionArea;
/*t1j8G0D6CkAf09sEmPaBx7v70CHlqO5KF008ZEPx4OQ=*/